﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>内部发放</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/global.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/table.css}"/>

    <style>
        .layui-form-item .layui-input-inline {
            float: left;
            width: 190px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
<div class="admin-main">

    <form class="layui-form" action="">
        <fieldset class=" layui-elem-quote">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">导入日期:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dateFrom" id="dateFrom" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">审核状态：</label>
                    <div class="layui-input-inline">
                        <select name="enterpriseStatus" lay-filter="aihao">
                            <option value=""></option>
                            <option value="0">待审核</option>
                            <option value="1">通过</option>
                            <option value="2">不通</option>
                        </select>
                    </div>
                </div>
                <a href="javascript:void(0);" class="layui-btn" id="search" onclick="searchEnterprise()">
                    <i class="layui-icon">&#xe615;</i> 搜索
                </a>
                <a href="javascript:void(0);" class="layui-btn layui-btn-primary" id="reset">清空</a>
            </div>

            <div class="layui-form-item">
                <a href="javascript:void(0);" class="layui-btn " id="add" onclick="add()">
                    内部发放
                </a>
            </div>
        </fieldset>
    </form>

    <fieldset class="layui-elem-field" id="enterpriseTableSet">
        <table class="layui-hide" id="enterprise" lay-filter="enterprise"></table>
    </fieldset>

</div>


<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="queryDetail">查看明细</a>
</script>

<script type="text/javascript">
    $(function () {
        loadInteriorTable();
    });

    function getEnterpriseName() {
        let enterpriseName = $("input#enterpriseName").val()
        return enterpriseName
    }

    function getEnterpriseStatus() {
        let enterpriseStatus = $("select#enterpriseStatus").val()
        return enterpriseStatus
    }

    function getInstanceType() {
        let instanceType = $("select#instanceType").val()
        return instanceType
    }

    function add() {
        // iframe层
        layer.open({
            type: 2,
            title: '上传文件',
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: '/merchant/interior/interiorUpload'
        });
    }

    function searchEnterprise() {
        // alert('ready to search')
        clearInteriorTable()
        loadInteriorTable()
    }

    function clearInteriorTable() {
        let tableSet = document.getElementById("enterpriseTableSet")

        var childs = tableSet.childNodes;

        console.log('tableSet.childNodes length:' + childs.length)

        childs.forEach(function (value, index, array) {
            tableSet.removeChild(array[index])
        });

        tableSet.removeChild(tableSet.firstChild)

        var para = document.createElement("table");
        para.setAttribute("id", "enterprise")
        para.setAttribute("lay-filter", "enterprise")
        tableSet.appendChild(para)

    }

    function loadInteriorTable() {
        layui.use(['table', 'jquery','laydate'], function () {

            //日期
            var laydate = layui.laydate;
            laydate.render({
                elem: '#dateFrom',range:'~' //指定元素
            });

            //table
            var table = layui.table,
                $ = layui.jquery;
            //第一个实例
            table.render({
                elem: '#enterprise'
                , height: 475
                , url: '/merchant/enterprise/list' //数据接口
                , page: true //开启分页
                , where: { //设定异步数据接口的参数
                    enterpriseName: getEnterpriseName(),
                    enterpriseStatus: getEnterpriseStatus(),
                    instanceType: getInstanceType()
                }
                , limit: 10   //默认十条数据一页
                , limits: [10, 20, 30, 50]  //数据分页条
                , cols: [[ //表头
                    {field: 'enterpriseName', title: '批处理号', width: '10%', sort: true, fixed: 'left'},
                    {field: 'instanceId', title:'导入时间', width: '20%'},
                    {field: 'paymentId', title: '总金额(元)', width: '20%'},
                    {field: 'demandCycTypeStr', title: '总笔数(笔)', width: '10%'},
                    {field: 'demandCycDay', title: '操作账号', width: '10%'},
                    {field: 'merId', title: '备注', width: '10%'},
                    {field: 'merId', title: '审核状态', width: '10%'},
                    {fixed: 'right', title: '操作', minwidth: '10%', align: 'center', toolbar: '#barDemo'}
                ]]
            });

            var frameindex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //监听工具条
            table.on('tool(enterprise)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data,//获得当前行数据
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'queryDetail') {
                    layer.open({
                        type: 2,
                        title: '发放明细',
                        shadeClose: true,
                        shade: 0.3,
                        area: ['90%', '90%'],
                        content: '/merchant/interior/interiorDetail?params=' + data.userAccount,
                    });
                }
            });

        });
    }

</script>
</body>
</html>